<template>
  <div class="admin">
    <el-container>
      <el-aside width="200">
        <adminHeader>

        </adminHeader>
      </el-aside>
      <el-main>
        <el-page-header content="线下回收订单管理"></el-page-header>
        <div>
          <el-table :data="offlineOrders" >
            <el-table-column prop="name" label="姓名" align="center" ></el-table-column>
            <el-table-column prop="phone" label="电话" align="center"></el-table-column>
            <el-table-column prop="way" label="回收方式" align="center" :filters="filWay" :filter-method="fliterRace"></el-table-column>
            <el-table-column prop="position" label="地址" align="center"></el-table-column>
            <el-table-column prop="state" label="状态" align="center" :filters="filState" :filter-method="fliterRace">
              <template slot-scope="scope">
                <span v-if="scope.row.statu === 200">已完成</span>
                <span v-if="scope.row.statu === 201">待确认收货</span>
                <span v-if="scope.row.statu === 202">已取消</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import adminHeader from "../../components/adminHeader";
export default {
  components:{adminHeader},
  data(){
    return{
      offlineOrders:[],
      filWay:[      ],
      filState:[
        {text:'已完成',value: 200},
        {text:'待收货',value: 201},
        {text:'已取消',value: 202}
      ]
    }
  },
  mounted() {
    this.getOffline();
  },
  methods:{
    getOffline(){
      this.axios.get('/api/admin/getOfflineOrder').then(res=>{
        console.log(res.data);
        this.offlineOrders = res.data;
        let ways = [];
        for (let i = 0;i < res.data.length; i++){
          ways.push(res.data[i].way);
        };
        this.filWay = [...new Set(ways)].map(item=>({label:item,text: item,value:item}));
      }).catch(err=>{
        console.log(err)
      })
    },
    fliterRace(value, row, column){
      const property = column['property'];
      return row[property] === value;
    }
  }
}
</script>

<style scoped>
  /deep/ .el-main{
    margin-top: 10px;
  }
</style>
